<template class="choose">
    <div>
        <!-- 标题 如果选择题模块数据的长度为零,那么久不显示选择题模块的大标题 -->
        <span class="qusetion_big_title" v-if="chooseQuestions.length>0">{{ order + '.&nbsp;&nbsp;'}}选择题:在每小题给出的四个选项中,只有一个选项是符合题目要求的.</span>
        <div v-for="(item,index) in chooseQuestions" :key="index">
            <p class="qusetion_small_title"> ( {{index+1}} ) [{{ item.score }}分] {{ item.questionDescription }} ( )</p>
            <el-radio-group v-model="item.option">
                <el-radio :label="1"> A. {{item.optionA}} </el-radio><br>
                <el-radio :label="2"> B. {{item.optionB}} </el-radio><br>
                <el-radio :label="3"> C. {{item.optionC}} </el-radio><br>
                <el-radio :label="4"> D. {{item.optionD}} </el-radio><br>
            </el-radio-group>
            <!-- 答案显示 -->
            <div v-if="item.option == '1'">
                <span>你的答案为:</span><span style="color: red; font-size: 20px;">&nbsp; A</span>
            </div>
            <div v-else-if="item.option == '2'">
                <span>你的答案为:</span><span style="color: red; font-size: 20px;"">&nbsp; B</span>
            </div>
            <div v-else-if="item.option == '3'">
                <span>你的答案为:</span><span style="color: red; font-size: 20px;"">&nbsp; C</span>
            </div>
            <div v-else-if="item.option == '4'">
                <span>你的答案为:</span><span style="color: red; font-size: 20px;"">&nbsp; D</span>
            </div>
        </div>
    </div>
</template>



<script>
    export default {
        props:['id'],
        data() {
            return {
                // 题目数据，包括这个题目的序号和这个题目的数据（每个小题的数据）
                order:"一",
                chooseQuestions: [
                    {
                        id: 1,
                        questionNumber: "C-113",
                        questionDescription: "请选择下面正确的选项",
                        optionA: "我不是水水水水",
                        optionB: "第三方v但是v德索萨非常VS的水",
                        optionC: "士大夫v的色佛v各色的v广东省",
                        optionD: "但是v不大舒服吧v第三方v给",
                        score: 5,
                        option: "",// 用户的选项，不需要后端传，但是需要将这个参数传回后端
                    },
                    {
                        id: 2,
                        questionNumber: "C-114",
                        questionDescription: "请选择下面正确的选项",
                        optionA: "我不是水水水水",
                        optionB: "第三方v但是v德索萨非常VS的水",
                        optionC: "士大夫v的色佛v各色的v广东省",
                        optionD: "但是v不大舒服吧v第三方v给",
                        score: 5,
                        option: "",// 用户的选项，不需要后端传，但是需要将这个参数传回后端
                    },
                    {
                        id: 3,
                        questionNumber: "C-115",
                        questionDescription: "请选择下面正确的选项",
                        optionA: "我不是水水水水",
                        optionB: "第三方v但是v德索萨非常VS的水",
                        optionC: "士大夫v的色佛v各色的v广东省",
                        optionD: "但是v不大舒服吧v第三方v给",
                        score: 5,
                        option: "",// 用户的选项，不需要后端传，但是需要将这个参数传回后端
                    }
                ]
            };
        },
        created() {
            console.log(this.id);
            // 利用query的id向后端发送请求，请求题型数据，因为题型分布等关系，分四次请求，分别请求不同题型
        }
    }
</script>



<style lang="less" scoped>
    /* 总体样式 */
    
    /* 大标题样式,eg 选择题,填空题这些 */
    .qusetion_big_title {
        font-size: 20px;
    }

    /* 小标题样式 */
    .qusetion_small_title {
        font-size: 18px;
    }

    /* 单选题样式 */
    .el-radio-group {
        font-size: 20px !important;

        .el-radio {
            font-size: 20px;
        }
    }
</style>